<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>收入证明</title>
    <style lang="">
         body{
            background-color: #fff;
        }
        .contentBox{
        width: 700px;
        height: 360px;
        position: absolute;
        top: 0%;
        left: 0;
        bottom: 0;
        right: 0;
        margin: 50px auto;
        border:1px solid #93918f;
        }
        p{
            font-size: 20px;
        }
        aside{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 5%;
    font-size: 25px;
    font-weight: 500 !important;
        }
       .container {
            display: flex;
            justify-content: left;
            align-items: left;
            flex-direction: column;
            line-height: 10px;
            margin-left: 4%;


          
        }
        .container p{
            letter-spacing: 10px;
        }
        .footer{
            display: flex;
            justify-content: right;
            align-items: center;
            flex-direction: column;
            margin-left: 40%;
            line-height: 10px;
            margin-top: 50px;
        }
        .row {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 40px;
            margin-top: 10px;
            /* background-color: red; */
        }
        .inputbox2{
          width: 80px;
          height: 25px;
          border: none;
          border-bottom:1px solid #000 ;

        }
        .inputbox3{
          width: 150px;
          height: 25px;
          border: none;
          border-bottom:1px solid #000 ;

    }
        .input-box{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .txt2{
            margin-left: 300px;
            margin-top: 50px;
        }
        .txt3{
            margin-left: -60px;

        }
        .txt{
         margin-left: -100px;
        }
        .phone{
            margin-left: 320px;
        }
        span{
            letter-spacing: 0;
        }
        .row1 p{
            letter-spacing: 18px;
          
        }
        .btn_box{
            margin-left: 40%;
            margin-top: 80px;
        }
        .layui-btn{
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            background-color: #009688;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            margin-left: 20px;

        }
        #btnPrint{
            background-color: #2f81ff;
            margin-right: 30px;

        }
        #btnBack{
            background-color: #ff8400;
        }
        input{
        font-size: 20px;
        }
        .inputbox3{
            font-size: 15px;
        }
        #ftBox{
            position:absolute;
            top:250%;
            bottom: 0px;
            right:0px;
            left: 2%;
        }
        .image{
            position:relative;
        }
        #bg{
            position:absolute;
            top:10%;
            bottom: 0px;
            right: 5%;
            left: 0px;
            margin: 10px -40px;
        }

    </style>
    <style media="print">
        @page {
                size: auto;  /* auto is the initial value */
                margin:0mm; /* this affects the margin in the printer settings */
            }
    </style>
        
</head>
<body>
    <div id="outBox">
        <div class="image" id="a">

        </div>
        <div class="contentBox" id="priBox">
            <aside>收入证明</aside>
            <div class="container">
                <!-- <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我辖区退休职工芦志红，身份证号：</p>
                <p>&nbsp;&nbsp;&nbsp;，其&nbsp;&nbsp;年 &nbsp;&nbsp;月 至&nbsp;&nbsp月 </p>
                <p>， 月 至 月每月退休金</p>
                <p>为。</p> -->
                <div class="row row1">
                    <div class="input-box ">
                        <p class="">我辖区退休职员</p>
                        <input type="text" autocomplete="off" class="layui-input inputbox2" readonly name="" id="recordname" />
                    </div>
                    <div class="input-box ">
                        <p class=" ">,身份证号：</p>
                    </div>
                  
         
                </div>
                <div class="row">
                    <div class="input-box ">
                        <input type="text" autocomplete="off" class="layui-input inputbox3" readonly name="" id="idNumber" />
                        <p class="">其</p>
                        <p class=""> <span>__</span>年</p>
                        <p class=""><span>__</span>月</p>
                        <p class=""><span>__</span>至</p>
                        <p class=""><span>__</span>月</p>
                        <p class=""><span>__</span>每月退休金为</p>
        
                    </div>
                </div>
                <div class="row">
                    <div class="input-box ">
                       
                        <p class=" idcard"><span>____</span>,</p>
                        <p class=" idcard"><span>____</span>月</p>
                        <p class=" idcard"><span>____</span>至</p>
                        <p class=" idcard"><span>____</span>月</p>
                        <p class=" idcard"><span>____</span>每月退休金</p>
                        <p class=" idcard">为<span>____</span>,</p>
        
                    </div>
        
                </div>
           
            </div>
        
        <div class="footer">
            <p>王舍人劳动保障服务中心</p>
            <p> &nbsp;&nbsp; 年 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 月  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 日</p>
        </div>
        <div class="ftBox" id="ftBox" style="display: none;margin-top: 90px;">
                               
        </div>
    
        <div class="btn_box">
                  
            <div class="layui-btn" id="btnPrint">
               打印
            </div>
            <!-- <div class="layui-btn" id="btnBack">
                返回
            </div> -->
        
        </div>
        
        
        
            </div>
    </div>
   
        <!--js逻辑-->
        <script src="../../../lib/layui/layui.js"></script>
        <script src="../../../plugins/jquery/jquery-2.1.0.js"></script>
        <script src="../../../plugins/jquery/jQuery.print.js"></script>
        <script src="../../../js/print.js"></script>
    
    <script type="text/javascript" src="../../../lib/loading/okLoading.js"></script>
        
        <script>
            layui.use(["element", "table", "form", "jquery", "laydate", "okLayer", "okUtils", "okMock"], function () {
                let table = layui.table;
                let form = layui.form;
                let laydate = layui.laydate;
                let okLayer = layui.okLayer;
                let okUtils = layui.okUtils;
                let okMock = layui.okMock;
                let $ = layui.jquery;
			okLoading.close($);
            okUtils.ajax("../../../data/navs.json", "get", true).done(function (res) {
                    console.log(res)
                    var usernameVal = res.data[0].recordname
                    console.log(usernameVal)
                    var idVal = res.data[0].idnumber
                    var textVal = res.data[0].title
                    var sexVal = res.data[0].sex
                    var addtVal = res.data[0].address
                    var txVal = res.data[0].tuixiutime
                    var lbVal = res.data[0].leibie

                    $("#recordname").val(usernameVal);
                    $("#idNumber").val(idVal);


                    }).fail(function (error) {
                    console.log(error)
	             	});
         
    

    
    
    
    
    
            })
        </script>
    
</body>
</html>